<template>
	<view class="container">
		<view class="header" @click="$goURl('/pages/personal/address/list?typeStr=1&takeout=1')" v-if="!data.type">
			<view class="left" v-if="JSON.stringify(address)!='{}'">
				<view class="address">
					<uni-tag text="默认" v-if="address.is_default==1"
						custom-style="background-color: #0bc4e3; border-color: #0bc4e3; color: #fff; margin-right:20upx;"
						type="primary" />
					{{address.name}} {{address.mobile}}
				</view>
				<view class="addressxx">
					{{address.province}}{{address.city}}{{address.area}}{{address.detailed}}

				</view>
			</view>
			<view class="left" v-else>
				<view class="addressxx">
					请选择地址
				</view>
			</view>
			<uni-icons type="forward" size="30"></uni-icons>
		</view>
		<view class="position">
			<view class="position-text">
				<view class="left">
					<view class="">{{data.title}}</view>
					<view class="botm">
						<view class="lefts">{{data.address}}</view>
						<!-- <view class="">554m</view> -->
					</view>
				</view>
				<view class="right" @click="lookmap">
					<image src="https://pili-vod.guanxikeji.com/xiaotubiao/img/1731305762419.png"></image>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="itemize">
				<scroll-view class="bg" scroll-y="true" :scroll-with-animation="true" style="height: calc(100vh - 60px);">
					<block v-for="(item,index) in data.shoplist" :key="index">
						<view class="itemize-item" :class="{'ac':data.active == index}" @click="changeNav(item,index)">
							<view class="itemize-img-box">
								<view class="itemize-img-wrap">
									<image :src="item.imageCnUrl"></image>
								</view>
								<text>{{item.topName}}</text>
							</view>
							<text>{{item.name}}</text>
						</view>
					</block>
				</scroll-view>
			</view>
			<view class="right-goods">
				<scroll-view scroll-y="true" style="height: calc(100vh - 150px);">
					<view class="goods-item" v-for="(item,index) in data.list" :key="index">
						<view class="goods">
							<image class="goods-img" :src="item.imageUrl" mode="aspectFit">
							</image>
							<view class="goods-info">
								<view class="goods-info-title">{{item.nameCn}}</view>
								<view class="goods-info-price Al_Bold">
									{{item.price }}
								</view>
								<view class="goods-info-btn-save">￥{{item.amount}} zkfc: {{$toFiexd((item.price-item.amount),2)}}</view>
								<view class="goods-info-btn">
									<view class="goods-info-btn-other">
									</view>
									<view class="goods-info-btn-select" @click="openmen(item)">选规格</view>
								</view>
							</view>
						</view>
					</view>

				</scroll-view>
			</view>
		</view>
		<view class="bootm" v-if="data.payfalg && data.paylist.length>0">
			<view class="fixed-menu">
				<view class="fixed-menu-price">
					<uni-badge :text="data.cardtatal" absolute="rightTop" size="normal">
						<view class="fixed-menu-price-img" @click="lookcard">
							<image src="https://pili-vod.guanxikeji.com/hemashangcheng/img/1730973181874.png"></image>
						</view>
					</uni-badge>
					<view class="fixed-menu-money">
						<view class="Al_Bold">
							<view class="fixed-menu-money-font1">
								{{data.tatolmoney}}
								<text></text>
							</view>
							<view class="mingInfo" v-if="data.deliveryPrice>0">
								<view style="color: rgb(209, 33, 40);">配送费:￥{{data.deliveryPrice}}</view>
							</view>
						</view>
						<view class="other-tips">￥{{data.tatolamount}}+ zkfc:{{data.zkfc}}</view>
					</view>
				</view>
				<view class="fixed-menu-pay" @click="gopay">去结算</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" @maskClick="handleMaskClicks">
			<view class="product-bpx">
				<view class="product-info">
					<view class="info-name">
						<view class="name">{{data.detail.name}}</view>
						<view class="number Al_Medium">
							<view class="delete" @click="delbox()"></view>
							<view>{{data.number}}</view>
							<view class="add" @click="addbox()"></view>
						</view>
					</view>
					<view class="info-tips">
						详情描述:
						<text v-for="(item,index) in data.detail.condimentRoundList" :key="index">
							{{item.condimentItemList[0].quantity }} x {{item.condimentItemList[0].showNameCn}} /
						</text>
					</view>
				</view>
				<scroll-view class="" scroll-y="true" :scroll-with-animation="true" style="height: calc(500px - 60px);">
					<view class="sku-box" >
						<view v-if=" data.detail.menuFlag == 3">
								<view class="other-sku-box Medium">
									<view class="other-sku-wrap" v-for="(item,index) in data.detail.groupRoundList" :key="index">
										<view class="other-sku-title Regular" v-for="(ite,i) in item.gpOptions" :key="i">
										 <view>{{ite.name}}</view>
										 <view class="other-sku-list" >
										 	<!-- <uni-data-checkbox mode="tag" v-model="checkbox1"  @change="groupChange($event)"  :localdata="gpOptions(item.gpOptions,i)"></uni-data-checkbox> -->
											<radio-group class=" sku-list" style="display: flex;" @change="groupChange($event,i,index)">
												<label class="sku Medium" style="margin-right: 20px;" v-for="(it,i) in ite.options" :key="i">
													<view class="sku-img-box">
														<radio :id="it.id" :value="it.id" :checked="it.checked"></radio>
														{{it.name}}
													</view>
												</label>
											</radio-group>
										 </view>
										</view>

									</view>
								</view>
						</view>
						<view v-else>
							<view class="sku-wrap" v-for="(item,index) in data.detail.condimentRoundList" :key="index">

								<view class="" v-if="item.minItemCount<item.condimentItemList.length && item.minItemCount == 1">
											<view class="sku-title">{{item.roundNameCn}}</view>
									<radio-group class=" sku-list" @change="radioChange($event,item,index)">
										<label class="sku Medium" v-for="(it,i) in item.condimentItemList" :key="i">
											<view class="sku-img-box">
												<radio :id="it.linkId" :value="it.linkId" :checked="it.checked"></radio>
												<image v-if="it.imageUrl" class="sku-img" :src="it.imageUrl"></image>
												{{it.showNameCn}}
											</view>
										</label>
									</radio-group>
								</view>
								<view class=" " style="margin-top: 10px;" v-else-if="item.minItemCount == 0 && item.itemCount>1 && item.condimentItemList.length == item.itemCount">
										<view class="sku-title">{{item.roundNameCn}}</view>
								<uni-data-checkbox multiple v-model="checkbox1"  @change="checkboxChange($event)" :localdata="hobby(item.condimentItemList,index)"></uni-data-checkbox>
								</view>
								<view class="sku-list"  style="margin-top: 10px;" v-else-if="item.minItemCount < item.condimentItemList.length &&  item.minItemCount>0">
										<view class="sku" v-for="(it,i) in item.condimentItemList" :key="i">
											<view class="sku-info">
													<view class="sku-img-box" >
														<image v-if="it.imageUrl" class="sku-img" :src="it.imageUrl"></image>
														{{it.showNameCn}}
													</view>
													<view class="number ">
															<image @click="delnumber(it,index,i)" src="https://pili-vod.guanxikeji.com/hemashangcheng/img/1730966193871.png"></image>
															<view style="margin: 0 5px;">{{it.checknumber}}</view>
															<image  @click="addnumber(it,index,i)" src="https://pili-vod.guanxikeji.com/hemashangcheng/img/1730966186417.png"></image>
													</view>
											</view>

										</view>
								</view>
								<view v-else class="sku-list">
									<view class="sku Medium " v-for="(it,i) in item.condimentItemList" :key="i">
										<view class="sku-img-box">
											<image class="sku-img" :src="it.imageUrl"></image>
											{{it.showNameCn}}
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="illustrate-box">
							<view class="illustrate-title">说明</view>
							<view class="illustrate">{{data.detail.product_desc || '无'}}</view>
						</view>
					</view>

				</scroll-view>
				<view class="product-bth-box">
					<view class="product-bth">
						<view class="product-price">
							<view class="after-price">
								¥ <text>{{data.detail.price}}</text>
							</view>
							<view class="before-price">
							<view>¥ {{data.detail.amount}}</view>
							<view>zkfc : {{$toFiexd((data.detail.price-data.detail.amount),2)}}</view>
							</view>
						</view>
						<view class="btn-text" @click="addcard">加入购物车</view>
					</view>
				</view>
			</view>

		</uni-popup>
		<uni-popup ref="cardlist"  type="bottom" border-radius="10px 10px 0 0" >
			<view class="Shopping-Cart">
				<view class="cart-head" @click="delpaylisy">
					<image src="https://pili-vod.guanxikeji.com/hemashangcheng/img/1731046873366.png"></image>
					清空购物车
				</view>
				<view class="cart-item-wrap">
					<scroll-view class="" scroll-y="true" :scroll-with-animation="true" style="height: calc(400px);">
						<view class="cart-item" v-for="(it,i) in data.paylist" :key="i">
							<image :src="it.img"></image>
							<view class="cart-item-box">
								<view class="item-box-title">{{it.name}}</view>
								<view class="item-box-tips-box" v-for="(item,index) in it.condimentRoundList">
									<view class="item-box-tips2" v-for="(ite,ine) in item.condimentItemList" :key="ine">
										<view v-if="ite.checked || item.checked"> {{ite.quantity}} x
											{{ite.showNameCn}}
										</view>
									</view>
								</view>
								<view class="item-box-bottom">
									<view class="price">
										<text>¥</text>
										{{it.price}}
										<view class="Al_Medium">	<text>¥</text> {{it.amount}} + zkfc:{{$toFiexd((it.price-it.amount),2) }}</view>
									</view>
									<view class="number Al_Medium">
										<view class="add" @click="minus(it,i)"></view>
										<view>{{it.quantity}}</view>
										<view class="delete" @click="addpaylist(it,i)"></view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onShow,
		onUnload
	} from "@dcloudio/uni-app";
	const {
		proxy
	} = getCurrentInstance();
	let popup = ref()
	let cardlist = ref()
	let checkbox1 = ref()
	let address = ref({
		id: ''
	})
	let data = reactive({
		active: 0,
		shoplist: [],
		list: [],
		store_code: '',
		lng: '',
		lat: '',
		title: "",
		address: "",
		detail: {},
		paylist: [],
		payfalg: false,
		payobj: [],
		tatolmoney: 0,
		tatolamount: 0,
		zkfc: 0,
		selectlist: [], //选择的
		number: 1,
		order_type: 1, //类型
		type:'',
		merdetails:{},
		deliveryPrice:0,
	})
	onLoad((opt) => {
			if(opt.id){
				data.store_code = opt.id
				data.lng = parseFloat(opt.lng)
				data.lat =parseFloat(opt.lat)
				getGoods() // 获取门店
			}
			let type = uni.getStorageSync('kfctype') //判断是外卖还是堂食
			data.type = uni.getStorageSync('kfctype') //判断是外卖还是堂食
			if (type) {
				data.order_type = 1
			} else {
				data.order_type = 2
				getAddress()
			}
	})
	onShow(() => {
		//判断是否支付成功返回
		let flag = uni.getStorageSync('paysuccess')
		if(flag){
			uni.removeStorageSync('paysuccess');
			data.paylist = []
		}
		uni.$on('selectAddress', (info) => { //开启监听全局的地址改变事件
			address.value = info
			data.payobj.address_id = info.id
			address.value.id = info.id
			try{
					data.lng = info.longitude
					data.lat = info.latitude
					getGoods()
			}catch(e){
				data.merdetails = uni.getStorageSync('merdetails');
				data.lng = data.merdetails.lng
				data.lat = data.merdetails.lat
			}
			uni.$off('selectAddress');
		})
	})
	onUnload(() => {
		uni.$off('selectAddress') //在此生命周期里销毁地址改变事件的监听

	})
	//获取地址
	function getAddress() {
		proxy.$request({
			url: `api/address/?page=1&size=20&is_default=1`,
			method: 'get',
			success: (res) => {
				if (res.data.ID) {
					address.value = res.data
					address.value['id'] = res.data.ID
					data.lng = res.data.longitude
					data.lat = res.data.latitude
					getGoods() // 获取门店
				} else {
					address.value = {}
					uni.showToast({
						icon: 'none',
						title: "请先添加地址"
					})

				}
			}
		})
	}
	//购物车弹窗
	function handleMaskClicks(){
		if(data.paylist.length>0){
				data.payfalg = true
		}
	}
	//规格数量 ++--
	function delbox(){

			if(data.number!==1){
				data.number--

			}
		data.detail.amount  = (data.detail.oldamount*data.number).toFixed(2)
		data.detail.price  = (data.detail.oldprice*data.number).toFixed(2)

	}
	function addbox(){
		data.number++
			data.detail.amount  =  (data.detail.oldamount*data.number).toFixed(2)
			data.detail.price  = (data.detail.oldprice*data.number).toFixed(2)
	}
	//清空购物车
	function delpaylisy() {
		data.paylist = []
		cardlist.value.close()
	}
	//选择产品
	function radioChange(e, row, i) {
		data.detail.condimentRoundList[i].condimentItemList.forEach((it) => {
			if (it.linkId == e.detail.value) {
				it.checked = true
			} else {
				it.checked = false
			}
		})
	}
	//单选或者多选
 function	checkboxChange(e){
		let dataarr= 	e.detail.data
		dataarr.forEach((it) => {
			data.detail.condimentRoundList[it.index].condimentItemList[it.i].checked = true
		})
	}
	function groupChange(e,i,index){
		data.detail.groupRoundList[index].gpOptions[i].options.forEach((it) => {
			if(it.id == e.detail.value){
				it.checked = true
			data.detail.groupRoundList[index].amount = it.amount
			data.detail.groupRoundList[index].price = it.price
			data.detail.amount = it.amount
			data.detail.price = it.price
			}else{
				it.checked = false
			}
		})
	}
	//结算
	function gopay() {

		//这里处理
		console.log(data.paylist, "paylist")
		let goods = []
		data.paylist.forEach((item) => {
			let obj = {}
			obj.quantity = item.quantity
			obj.linkId = item.linkId
			obj.condimentItems= []
			if(item.menuFlag == 3){
					//这里暂时只处理咖啡
					 item.groupRoundList.forEach((item) => {
							item.gpOptions.forEach((items) => {
									if(items.options.length>1){
										items.options.forEach((it) => {
											if(it.checked){
													obj.childLinkId = it.id
											}
										})
									}
							})
					 })
			}else{
				item.condimentRoundList.forEach((ite) => {

					if(ite.condimentItemList.length>ite.itemCount){
							ite.condimentItemList.forEach((it)=> {
								let listobj ={}
									if(it.checked && it.checknumber == 0){
										listobj.condimentLinkId = ite.condimentLinkId
										listobj.linkId = it.linkId
										listobj.quantity = it.quantity
											obj.condimentItems.push(listobj)
									}else if( it.checked &&  it.checknumber>0){
										listobj.condimentLinkId = ite.condimentLinkId
										listobj.linkId = it.linkId
										listobj.quantity  = it.checknumber.toString()
										it.quantity = it.checknumber.toString()
										it.checked = true
										obj.condimentItems.push(listobj)
									}
							})
					}else if(ite.condimentItemList.length == ite.itemCount && ite.minItemCount == "0"){
							ite.condimentItemList.forEach((it)=> {
								let listobj ={}
									if(it.checked){
										listobj.condimentLinkId = ite.condimentLinkId
										listobj.linkId = it.linkId
										listobj.quantity = it.quantity
											obj.condimentItems.push(listobj)
									}
							})
					}
				})
			}
			goods.push(obj)
		})
		uni.setStorageSync('goods', goods);
		uni.setStorageSync('paylist', data.paylist);
		uni.navigateTo({
			url: `/pages/Lochig/kfc/confirmOrder?id=${data.store_code}&lng=${data.lng}&lat=${data.lat}&addressid=${address.value['id']}&deliveryPrice=${data.deliveryPrice}&title=${data.title}&address=${data.address}`
		})
	}
	//选规格
	function openmen(row) {

		checkbox1.value = []
		data.number = 1
		data.detail = {}
		proxy.$request({
			url: `api/openapi/kfc/getGoodsDetail/`,
			method: 'post',
			data: {
				product_id: row.linkId,
				store_code: data.store_code,
			},
			success: (res) => {
				if (res.errno == 0) {
					data.payfalg = false
					data.detail = res.data
					data.detail.oldamount = res.data.amount
					data.detail.oldprice = res.data.price
                               					popup.value.open()
					if(res.data.menuFlag == 3){

							  //因为现在只有一个 不知道多个下是什么数据格式 先这样

						checkbox1.value = data.detail.groupRoundList[0].groupItemList[0].linkId
							data.detail.groupRoundList[0].gpOptions.forEach((item) => {
									if(item.options.length>1){
										item.options.forEach((ite,i) => {
											ite.id = data.detail.groupRoundList[0].groupItemList[i].linkId
											ite.amount = data.detail.groupRoundList[0].groupItemList[i].amount
											ite.price = data.detail.groupRoundList[0].groupItemList[i].price
											ite.checked = false
										})
										item.options[0].checked = true

									}else{
											item.options[0].checked = true
									}
							})
							let amount =  JSON.parse(JSON.stringify(  data.detail.groupRoundList[0].groupItemList[0].amount))
							let price =  JSON.parse(JSON.stringify(data.detail.groupRoundList[0].groupItemList[0].price))

							data.detail.groupRoundList[0].amount = JSON.parse(JSON.stringify(amount))
							data.detail.groupRoundList[0].price =  JSON.parse(JSON.stringify(price))
							data.detail.amount = JSON.parse(JSON.stringify(amount))
							data.detail.price = JSON.parse(JSON.stringify(price))
							data.detail.oldamount = JSON.parse(JSON.stringify(amount))
							data.detail.oldprice = JSON.parse(JSON.stringify(price))
					}else{
							data.detail.condimentRoundList.forEach((it) => {
								if (it.condimentItemList.length > it.itemCount) {
									//处理多选
									it.condimentItemList.forEach((item) => {
										item.checked = false
										item.checknumber = 0
									})
									//默认第一个
									it.condimentItemList[0].checked = true
									it.condimentItemList[0].checknumber = parseInt( it.condimentItemList[0].quantity)
								}else if(it.itemCount>1 && it.condimentItemList.length == it.itemCount && it.minItemCount == 0){
										it.checked = false
								} else {
									it.checked = true
								}
							})
					}
						console.log(data.detail,"detail")


				}else{
						uni.showToast({
							icon: 'none',
							title: res.errmsg
						})
				}
			}
		})
	}
	//多选数组
	function hobby(arr,index){
			console.log(arr,"Arr")
			let data = []
			arr.forEach((it,i) => {
				let obj ={
					text: it.showNameCn,
					value: it.linkId,
					index:index,
					i:i
				}
				data.push(obj)
			})
			return data

	}
	//加入购物车
	function addcard() {

		data.detail.quantity = data.number
		data.paylist.push(data.detail)
		data.cardtatal = data.paylist.length

		let money = 0
		let zkfc = 0
		let amount = 0
		data.paylist.forEach((it) => {
			money += parseFloat(it.price)
			amount += parseFloat(it.amount)
			zkfc += parseFloat(it.price - it.amount)
		})
		data.tatolmoney = (money+parseFloat(data.deliveryPrice) ).toFixed(2)
		data.tatolamount = amount.toFixed(2)
		data.zkfc = zkfc.toFixed(2)

		data.payfalg = true
		popup.value.close()


	}
	//查看购物车
	function lookcard() {
		cardlist.value.open()
	}
	//减去
	function minus(row, i) {

		if (data.paylist[i].quantity == 1) {
			data.paylist.splice(i, 1)
			let money = 0
			let zkfc = 0
			let amount = 0
			data.paylist.forEach((it) => {
				money += parseFloat(it.price)
				amount += parseFloat(it.amount)
				zkfc += parseFloat(it.price - it.amount)
			})
			data.tatolmoney = (money+parseFloat(data.deliveryPrice) ).toFixed(2)
			data.tatolamount = amount.toFixed(2)
			data.zkfc = zkfc.toFixed(2)
			cardlist.value.close()
		} else {
			data.paylist[i].quantity--
			data.paylist[i].amount =  (data.paylist[i].oldamount*data.paylist[i].quantity).toFixed(2)
			data.paylist[i].price =  (data.paylist[i].oldprice*data.paylist[i].quantity).toFixed(2)
			let money = 0
			let zkfc = 0
			let amount = 0
			data.paylist.forEach((it) => {
				money += parseFloat(it.price)
				amount += parseFloat(it.amount)
				zkfc += parseFloat(it.price - it.amount)
			})
			data.tatolmoney = (money+parseFloat(data.deliveryPrice) ).toFixed(2)
			data.tatolamount = amount.toFixed(2)
			data.zkfc = zkfc.toFixed(2)
		}
		data.cardtatal = data.paylist.length
		if (data.paylist.length == 0) {
			cardlist.value.close()
		}
	}
	//增加
	function addpaylist(row, i) {

		data.paylist[i].quantity++
		data.paylist[i].amount =  (data.paylist[i].oldamount*data.paylist[i].quantity).toFixed(2)
		data.paylist[i].price =  (data.paylist[i].oldprice*data.paylist[i].quantity).toFixed(2)
		let money = 0
		let zkfc = 0
		let amount = 0
		data.paylist.forEach((it) => {
			money += parseFloat(it.price)
			amount += parseFloat(it.amount)
			zkfc += parseFloat(it.price - it.amount)
		})
		data.tatolmoney = (money+parseFloat(data.deliveryPrice) ).toFixed(2)
		data.tatolamount = amount.toFixed(2)
		data.zkfc = zkfc.toFixed(2)
	}

	function getGoods() {
		proxy.$request({
			url: `api/openapi/kfc/menuList/`,
			method: 'post',
			data: {
				lat: data.lat,
				lng: data.lng,
				store_code: data.store_code,
				order_type: data.order_type
			},
			success: (res) => {
				if (res.errno == 0) {

					data.title = res.data.name
					data.address = res.data.address
					data.shoplist = res.data.menu
					data.list = res.data.menu[0].menuList
					data.deliveryPrice = res.data.deliveryPrice
					data.store_code = res.data.storeCode
				}else{
					uni.showToast({
						icon: 'none',
						title: res.errmsg
					})
					data.title = ""
					data.address = ""
					data.store_code = ""
					data.deliveryPrice = ""
					data.lat = ""
					data.lng = ""
					data.shoplist =[]
					data.list =[]
				}
			}
		})
	}
	//减去
	function delnumber(row,index,i){
		if(row.checknumber!==0){
			data.detail.condimentRoundList[index].condimentItemList[i].checknumber--
			if(row.checknumber == 0){
				data.detail.condimentRoundList[index].condimentItemList[i].checked = false
			}
		}

	}
	//增加
	 function addnumber(row,index,i){
			if(row.checknumber<row.quantity){
				let num = 0
				data.detail.condimentRoundList[index].condimentItemList.forEach((it) => {
					num +=it.checknumber
				})
				if(num<data.detail.condimentRoundList[index].minItemCount){
					data.detail.condimentRoundList[index].condimentItemList[i].checknumber++
					if(row.checknumber > 0){
						data.detail.condimentRoundList[index].condimentItemList[i].checked = true
					}
				}
			}
	}
	//左边类
	function changeNav(row, i) {
		data.active = i
		data.list = row.menuList
	}
	//查看地图
	function lookmap(){
		uni.openLocation({
					latitude: data.lat,
					longitude: data.lng,
					success: function () {
						console.log('success');
					}
				});
	}
	//type=3的单选
	function gpOptions(data,index){

			let arr = []
				data[index].options.forEach((item) => {
							let obj = {
								text: item.name,
								id: item.id,
							}
							arr.push(obj)
				})
							console.log(arr,"arrarr")
			return arr
	}
</script>


<style scoped lang="scss">
	.container {
		background-color: #fff;
		.header {
			background-color: #fff;
			padding: 30upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-image: url('https://img.fubaozx.cn/static/oldImg/1699501708457.png');
			background-repeat: no-repeat;
			background-size: 100% 10upx;
			background-position: bottom;

			.left {
				.address {
					font-size: 28upx;
					color: #333333;
				}

				.addressxx {
					font-size: 32upx;
					color: #333333;
					font-weight: bold;
					margin: 10upx 0;
				}

				.info {
					font-size: 24upx;
					color: #333333;
				}
			}
		}
		.position {

			height: 99px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: url('https://pili-vod.guanxikeji.com/hemashangcheng/img/1730881665512.png') no-repeat 100% 100%;
			padding: 0 0px 0 22px;

			.position-text {
					width: 100%;
				padding-top: 11px;
				display: flex;
				justify-content: space-between;

				.left {
					width: 80%;
					font-size: 17px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: rgba(0, 0, 0, .85);
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;

					.botm {

						font-size: 13px !important;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: rgba(0, 0, 0, .45);
						margin-top: 11px;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.lefts {
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}


					}
				}

				.right {
					width: 20%;
					image {
						bottom: 0;
						width: 77px;
						height: 77px;
						background-size: cover;
					}

				}
			}
		}

		.box {
			display: flex;
			justify-content: space-between;

			.itemize {
				width: 30%;
				.bg {
					background: #F7F8F9;

					.itemize-item {
						width: 110px;
						height: 77px;
						background: #f9f9f9;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						font-size: 13px;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: rgba(0, 0, 0, .45);
						line-height: 18px;

						.itemize-img-box {
							position: relative;

							.itemize-img-wrap {
								display: flex;
								justify-content: center;
								position: relative;

								image {
									width: 26px;
									height: 26px;
								}

								text {}
							}
						}
					}

					.ac {
						border-left: 4px solid rgb(209, 33, 40);
					}
				}

			}

			.right-goods {
				width: 70%;
				height: calc(100vh - 99px);
				background: #fff;

				.goods {

					padding-left: 11px;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-bottom: 22px;

					.goods-img {
							width: 40%;
						height: 110px;

					}

					.goods-info {
						width: 60%;
						flex: 1;
						height: 110px;
						margin-left: 5px;

						.goods-info-title {

							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							font-size: 17px;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(0, 0, 0, .85);
						}

						.goods-info-price {
							height: 30px;
							font-size: 22px;
							font-family: AlibabaPuHuiTiB;
							color: rgba(0, 0, 0, .85);
							line-height: 30px;
							margin-top: 5px;
							display: flex;
							align-items: center;


						}

						.goods-info-btn-save {

							background: #fff;

							font-size: 11px;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #fc2326;

						}

						.goods-info-price::before {
							content: "￥";
							font-size: 13px;
							font-family: AlibabaPuHuiTiB;
							color: rgba(0, 0, 0, .85);
						}

						.Al_Bold {
							font-family: webfont !important;
							font-style: normal;
							-webkit-font-smoothing: antialiased;
							-moz-osx-font-smoothing: grayscale;
						}

						.goods-info-btn {
							display: flex;
							justify-content: space-between;
							align-items: flex-end;
							min-height: 40px;
							padding-right: 20px;
							text-align: center;

							.goods-info-btn-other {}

							.goods-info-btn-select {
								width: 70px;
								height: 35px;
								background: rgb(209, 33, 40);
								border-radius: 17px;
								font-size: 15px;
								font-family: PingFang-SC-Heavy, PingFang-SC;
								font-weight: 800;
								color: #fff;
								line-height: 35px;
								text-align: center;
							}
						}
					}
				}
			}
		}
	}

	.product-bpx {
		border-radius: 22px 22px 0px 0px;
		width: 100%;
		padding: 22px 0 0;
		background-color: #fff;

		.product-info {
			padding: 0 22px;
			border-bottom: 0.5px solid #f2f2f2;

			.info-name {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.name {
					font-size: 20px;
					font-family: PingFang SC-Semibold, PingFang SC;
					font-weight: 600;
					color: rgba(0, 0, 0, .85);
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}

				.number {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 13px;
					color: rgba(0, 0, 0, .85);

					.delete {
						margin-right: 11px;
						width: 17px;
						height: 17px;
						background-repeat: no-repeat;
						background-size: cover;
						background-image: url('https://pili-vod.guanxikeji.com/hemashangcheng/img/1730966193871.png');
					}

					.add {
						margin-left: 11px;
						width: 17px;
						height: 17px;
						background-repeat: no-repeat;
						background-size: cover;
						background-image: url('https://pili-vod.guanxikeji.com/hemashangcheng/img/1730966186417.png');
					}
				}


				.Al_Medium {
					font-family: Medium !important;
					font-style: normal;
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
				}

			}

			.info-tips {
				margin-top: 11px;
				font-size: 12px;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(0, 0, 0, .85);
				margin-bottom: 16px;

				text {
					color: rgba(0, 0, 0, .45);
					margin: 2px;
				}
			}
		}

		.sku-box {
			margin-top: 27px;
			padding: 0 22px;

			.sku-wrap {
				.sku-title {
					color: rgba(0, 0, 0, .45);
					font-size: 14px;
				}

				.sku-list {
					margin: 22px 0;
					display: flex;
					flex-wrap: wrap;

					.sku {
						width: 117px;
						margin-right: 11px;
						margin-bottom: 11px;
						font-size: 14px;
						color: rgba(0, 0, 0, .85);
						font-weight: 500;
						text-align: center;
						border: 0.5px solid transparent;
						border-radius: 5px;
						padding: 5px;
						box-sizing: border-box;

						.sku-img-box {
							position: relative;

							.sku-img-icon {
								width: 24px;
								height: 24px;
								box-sizing: border-box;
								border: 2px solid rgba(0, 0, 0, .25);
								border-radius: 100%;
								position: absolute;
								right: 0;
								top: 0;
								z-index: 20;

							}

							.sku-img {
								width: 107px;
								height: 107px;
							}
						}
						.number{
							    display: flex;
							    align-items: center;
							    justify-content: center;
							    font-size: 12px;
							    color: rgba(0, 0, 0, .85);
									margin-top: 5px;
										image{
											    width: 16px;
											    height: 16px;
										}
						}
					}

					.br {
						border-color: rgb(191, 191, 191);
					}

					.img-none {
						height: 38px !important;
						line-height: 27px;
					}
				}
			}
			.other-sku-box{
				color: rgba(0, 0, 0, .85);
				    font-size: 14px;
						.other-sku-wrap{
							margin-top: 15px;
							.other-sku-title{
								color: rgba(0, 0, 0, .45);
								    font-size: 13px;
										.other-sku-list{
											margin-top: 7px;
											    display: flex;
											    align-items: center;
										}
							}
						}
			}
			.illustrate-box {
				margin-top: 27px;
				padding-bottom: 35px;

				.illustrate-title {
					font-size: 15px;
					color: rgba(0, 0, 0, .45);
				}

				.illustrate {
					margin-top: 11px;
					font-size: 15px;
					color: rgba(0, 0, 0, .45);
				}
			}

		}


		.product-bth-box {


			background-color: #fff;
			padding: 8px 22px 20px 22px;
			box-shadow: 0 -5px 16px 0 hsla(0, 0%, 94.9%, .6);

			.product-bth {

				height: 48px;
				background-color: #d12128;
				border-radius: 33px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 16px;

				.product-price {
					display: flex;
					align-items: center;

					.after-price {
						font-size: 13px;
						color: #fff;
						font-family: AlibabaPuHuiTiM;

						text {
							font-size: 22px;
							margin-left: 2px;
						}
					}

					.before-price {
						font-size: 13px;
						color: #fff;
						font-family: AlibabaPuHuiTiM;
						margin-left: 7px;
					}
				}

				.btn-text {
					font-size: 19px;
					color: #fff;
				}
			}
		}


	}

	.Shopping-Cart {
		border-radius: 22px 22px 0px 0px;
		height: 518px;
		padding: 16px 16px 0;
		background-color: #fff;

		.cart-head {
			text-align: right;
			color: rgba(0, 0, 0, .85);
			font-size: 13px;
			margin-bottom: 11px;
			display: flex;
			justify-content: flex-end;

			image {
				width: 17px;
				height: 17px;
				margin-right: 5px;
			}
		}

		.cart-item-wrap {
			width: 100%;
			display: flex;
			flex-wrap: wrap;

			.cart-item {
				width: 100%;
				display: flex;
				padding-bottom: 11px;
				border-bottom: 0.5px solid #f2f2f2;
				margin-bottom: 16px;

				image {
					max-width: 77px;
					min-width: 77px;
					height: 77px;
				}

				.cart-item-box {
					flex-grow: 1;
					margin-left: 11px;

					.item-box-title {
						font-size: 17px;
						font-weight: 500;
						font-family: PingFang-SC-Medium, PingFang-SC;
						color: rgba(0, 0, 0, .85);
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}

					.item-box-tips-box {
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;

						.item-box-tips2 {
							font-size: 11px;
							color: rgba(0, 0, 0, .45);
							font-family: PingFang-SC-Medium, PingFang-SC;
							font-weight: 400;
							display: inline-block;
						}
					}

					.item-box-bottom {
						width: 100%;
						display: flex;
						justify-content: space-between;
						// margin-top: 8px;

						.price {
							font-size: 22px;
							font-weight: 400;
							color: rgba(0, 0, 0, .85);

							text {
								font-size: 13px;
								font-weight: 700;
							}

							.Al_Medium {
								font-size: 13px;
								color: red;
								// margin-left: 5px;
								font-weight: 500;
								margin-right: 5px;
								// text-decoration: line-through;
							}

						}

						.number {
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 13px;
							color: rgba(0, 0, 0, .85);

							.add {
								margin-right: 11px;
								width: 17px;
								height: 17px;
								background-repeat: no-repeat;
								background-size: cover;
								background-image: url('https://pili-vod.guanxikeji.com/hemashangcheng/img/1730966193871.png');
							}

							.delete {
								margin-left: 11px;
								width: 17px;
								height: 17px;
								background-repeat: no-repeat;
								background-size: cover;
								background-image: url('https://pili-vod.guanxikeji.com/hemashangcheng/img/1730966186417.png');
							}
						}
					}
				}
			}
		}
	}

	.bootm {
		width: 100%;
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10003;

		.fixed-menu {
			width: 100%;
			height: 66px;
			background: #fff;
			box-shadow: 0px -5px 16px 0px hsla(0, 0%, 94.9%, .8);
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 10px;
			.fixed-menu-price {
				flex: 1;
				display: flex;
				justify-content: flex-start;

				.fixed-menu-price-img {
					width: 77px;
					height: 66px;
					position: relative;

					image {
						width: 77px;
						height: 77px;
						position: absolute;
						top: -11px;
					}
				}

				.fixed-menu-money {
					flex: 1;
					height: 66px;
					padding-top: 6px;
					margin-left: 11px;

					.Al_Bold {
						font-family: webfont !important;
						font-style: normal;
						-webkit-font-smoothing: antialiased;
						-moz-osx-font-smoothing: grayscale;
						display: flex;
						align-items: center;

						.fixed-menu-money-font1 {
							font-size: 22px;
							font-family: AlibabaPuHuiTiB;
							color: rgba(0, 0, 0, .85);

							text {
								font-size: 13px;
								font-family: AlibabaPuHuiTiM;
								color: rgba(0, 0, 0, .25);
								text-decoration: line-through;
								margin-left: 5px;
							}
						}
					}

					.other-tips {
						display: inline-flex;
						height: 17px;
						background: #fff;
						border-radius: 2px;
						font-size: 11px;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #fc2326;
						line-height: 16px;
						padding: 0 5px;
						border: 0.5px solid #fc2326;
						border-color: rgb(209, 33, 40);
						color: rgb(209, 33, 40);
					}

					.fixed-menu-money-font1::before {
						content: "￥";
						font-size: 13px;
						color: rgba(0, 0, 0, .85);
					}
				}


			}

			.fixed-menu-pay {
				width: 120px;
				height: 66px;
				background: rgb(209, 33, 40);
				font-size: 19px;
				font-family: PingFang-SC-Heavy, PingFang-SC;
				font-weight: 800;
				color: #fff;
				line-height: 66px;
				text-align: center;
			}
		}
	}
	.mingInfo {
		font-size: 10px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999;
		display: flex;
		padding-top: 5px;

		.paybtnInfo-icon-up {
			width: 16px;
			height: 16px;
			background-image: url(https://pili-vod.guanxikeji.com/logo/img/1731116006296.png);
			background-size: cover;
		}
	}
</style>
